<style scoped>
.CompanyIntegratedQuery {
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 90.5vh;
  position: relative;
}
.ciq-top {
  padding: 15px 0;
  border-bottom: 2px solid #f4f4f4;
}
.ciq-top div {
  display: flex;
}
.ciq-top p {
  margin: 3px 6px 0 0;
  display: inline-block;
  width: 70px;
  white-space: nowrap;
  text-align: end;
}
.wd {
  width: 160px;
}
.ciq-btn {
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;
}
.ciq-tab {
  display: flex;
}
.tab-left {
  width: 50%;
  padding-right: 5px;
  border-right: 2px solid #f4f4f4;
}
.tab-right {
  width: 50%;
  padding-left: 5px;
}
</style>

<style>
.CompanyIntegratedQuery .ciq-top .el-input__inner,
.CompanyIntegratedQuery .ciq-btn .el-input__inner {
  height: 30px;
}
.CompanyIntegratedQuery .ciq-top .el-date-editor .el-range__icon {
  line-height: 23px;
}
.CompanyIntegratedQuery .ciq-top .el-date-editor .el-range-separator {
  width: 8%;
  line-height: 23px;
}
.CompanyIntegratedQuery .ciq-btn .el-checkbox.is-bordered {
  padding: 5px 20px 9px 10px;
  height: 30px;
}
.CompanyIntegratedQuery .el-pagination {
  text-align: end;
}
.CompanyIntegratedQuery .el-pagination--small .el-pagination__editor,
.el-pagination--small .el-pagination__editor.el-input .el-input__inner {
  width: 50px;
  height: 30px;
  margin-right: 5px;
}
.CompanyIntegratedQuery
  .el-pagination.is-background.el-pagination--small
  .btn-next,
.el-pagination.is-background.el-pagination--small .btn-prev,
.el-pagination.is-background.el-pagination--small .el-pager li {
  width: 30px;
  height: 30px;
}
.CompanyIntegratedQuery .el-pagination--small button,
.el-pagination--small span:not([class*='suffix']) {
  margin-right: 10px;
}
.CompanyIntegratedQuery .el-pagination .el-select .el-input .el-input__inner {
  width: 120px;
}
</style>

<template>
  <div class="CompanyIntegratedQuery">
    <div class="ciq-top">
      <div>
        <p>日期</p>
        <el-date-picker
          class="update-el-datetimerange"
          unlink-panels
          v-model="timeDate"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>

        <p>款号</p>
        <el-input class="wd" v-model="styleNumber"></el-input>

        <p>店铺</p>
        <el-input
          style="width: 60px; margin-right: 10px"
          disabled
          v-model="customerNo"
          @blur="Change2"
        ></el-input>
        <el-select
          class="update-el-select"
          v-model="customerName"
          disabled
          @change="Change1"
          style="width: 100px"
        >
          <el-option
            v-for="item in customerList"
            :key="item.value + Math.random()"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <p>单号</p>
        <el-input class="wd" v-model="sequence"></el-input>

        <p>品牌</p>
        <el-select class="wd update-el-select" v-model="brandName" clearable>
          <el-option
            v-for="item in brandList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <p>季度</p>
        <el-select class="wd update-el-select" v-model="quartId" clearable>
          <el-option
            v-for="item in quartListStrList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>

      <!-- <div style="margin-top:10px">
          <p>下载日期</p>
          <el-date-picker
            unlink-panels
            v-model="timeData"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div> -->
    </div>

    <div class="ciq-btn">
      <div style="display: flex">
        <el-button @click="search" type="primary" icon="el-icon-search"
          >查询</el-button
        >
        <el-button @click="save" :disabled="Dis || isRegular" icon="el-icon-box"
          >验收入库</el-button
        >
        <!-- <div style="width:307px;height:20px;margin:3px 10px;">
        <el-progress :text-inside="true" :stroke-width="20" :percentage="50"></el-progress>
        </div> -->
      </div>
      <div>
        <!-- <el-select v-model="az" style="width:90px;margin-right:10px" @change="Change">
          <el-option
            v-for="item in List"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select> -->
        <el-checkbox v-model="twoInfo" border>二维</el-checkbox>
      </div>
    </div>

    <div class="ciq-tab">
      <div class="tab-left">
        <el-table
          id="tip1"
          height="72vh"
          show-summary
          :data="tab1"
          style="width: 100%"
          highlight-current-row
          @row-click="rowClick"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
        >
          <template v-for="i in bList">
            <el-table-column
              show-overflow-tooltip
              :prop="i.prop"
              :label="i.label"
              :width="i.width"
              :key="i.prop"
            >
            </el-table-column>
          </template>
        </el-table>
        <!-- 分頁 -->
        <!-- :pager-count="5"  设置显示最大页码数 超过用 … 显示 -->
        <el-pagination
          small
          background
          :pager-count="Count"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit"
          :page-count="pagesNum"
          :total="dataLen"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>

      <div class="tab-right">
        <el-table
          id="tip1"
          :data="tab2"
          height="72vh"
          style="width: 100%"
          highlight-current-row
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
        >
          <template v-for="i in eList">
            <el-table-column
              show-overflow-tooltip
              :prop="i.prop"
              :label="i.label"
              :width="i.width"
              :key="i.prop + Math.random()"
            >
            </el-table-column>
          </template>
        </el-table>
        <el-pagination
          small
          background
          :pager-count="Count1"
          layout="prev, pager, next, jumper, sizes"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="limit1"
          :page-count="pagesNum1"
          :total="dataLen1"
          @current-change="handleCurrentChange1"
          @size-change="handleSizeChange1"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getBranded } from '../../../network/branded'
import { getQuarter } from '../../../network/quarter'
import { getClient } from '../../../network/client'
import {
  getComplan,
  getComplan1,
  getYH,
  getAcceptance
} from '../../../network/vipClient'
import { getShop } from '../../../network/shop'
export default {
  name: 'company_integrated_query',
  created() {
    if (localStorage.getItem('whatState') == '直营') {
      this.isRegular = false
    } else {
      this.isRegular = true
    }
    this.bList = this.bList1
    this.eList = this.eList1
    //季度
    getQuarter().then((res) => {
      console.log(res.data)
      let qList = res.data.data
      qList.forEach((e) => {
        this.quartListStrList.push({ label: e.name, value: e.name })
      })
    })
    //品牌
    getBranded().then((res) => {
      console.log(res)
      res.data.data.forEach((e) => {
        this.brandList.push({ value: e.name, label: e.name })
      })
    })
    getShop().then((res) => {
      console.log(res.data)
      this.customerNo = res.data.data.no
      this.customerName = res.data.data.name
    })
    // 获取所有客户信息
    getClient({ limit: 99999 }).then((res) => {
      console.log(res.data)
      let list = res.data.data
      list.forEach((e) => {
        if (e.stop != 1) {
          this.customerList.push({ value: e.name, label: e.name, value1: e.no })
        }
      })
    })
  },
  data() {
    return {
      isRegular: false,
      Count: 5, //页码设置显示最大页码数 超过用 … 显示
      limit: 20, //本页条数
      pagesNum: 0, //当前页
      dataLen: 0, //总数据条数
      currentPage: 1, // 当前页码

      Count1: 5, //页码设置显示最大页码数 超过用 … 显示
      limit1: 20, //本页条数
      pagesNum1: 0, //当前页
      dataLen1: 0, //总数据条数
      currentPage1: 1, // 当前页码

      Dis: false,
      tab1: [],
      tab2: [],
      styleNumber: '',
      customerNo: '',
      customerName: '',
      sequence: '',
      brandName: '',
      quartId: '',
      customerList: [],
      brandList: [],
      quartListStrList: [],
      timeDate: '',
      bList: [],
      twoInfo: false,

      bList1: [
        { prop: 'mnemonicCode', label: '是否验收' },
        // {prop:'selectTypeName',label:'类型'},
        { prop: 'inputSequence', label: '单据序号', width: '120' },
        { prop: 'purchaseTime', label: '日期', width: '100' },
        { prop: 'number', label: '数量' },
        { prop: 'money', label: '金额' },
        { prop: 'no', label: '客户编号' },
        { prop: 'name', label: '客户简称', width: '130' }
      ],

      eList: [],
      eList1: [
        // {prop:'',label:'类型'},
        { prop: 'sequence', label: '单据序号', width: '130' },
        { prop: 'kindsNumber', label: '货号', width: '130' },
        { prop: 'colorName', label: '颜色' },
        { prop: 'size', label: '尺码' },
        { prop: 'sellingPrice', label: '售价' },
        { prop: 'sum', label: '数量' },
        { prop: 'purchaseTime', label: '进货日期', width: '100' }
      ],
      eList2: [
        { prop: 'typeNumber', label: '型号', width: '120' },
        { prop: 'colorName', label: '颜色' },
        { prop: 'c05', label: '05-XS', width: '50' },
        { prop: 'c07', label: '07-S', width: '50' },
        { prop: 'c09', label: '09-M', width: '50' },
        { prop: 'c11', label: '11-L', width: '50' },
        { prop: 'c13', label: '13-XL', width: '50' },
        { prop: 'c15', label: '15-2L', width: '50' },
        { prop: 'c17', label: '17-3L', width: '50' },
        { prop: 'c19', label: '19-4L', width: '50' },
        { prop: 'c21', label: '21-5L', width: '50' },
        { prop: 'c23', label: '23-6L', width: '50' },
        { prop: 'F', label: 'F', width: '50' },
        { prop: '', label: '小计' },
        { prop: 'sellingPrice', label: '售价金额' },
        { prop: 'brandedName', label: '品牌' }
      ],

      detail: [],
      inofList: [],
      twoList: []
    }
  },
  methods: {
    handleSizeChange1(val) {
      //每页多少条
      this.limit1 = val
      this.pagesNum1 = Math.ceil(this.dataLen1 / this.limit1)
      this.search()
    },
    handleCurrentChange1(val) {
      //当前页
      this.currentPage1 = val
      this.search()
    },
    handleSizeChange(val) {
      //每页多少条
      this.limit = val
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
      this.search()
    },
    handleCurrentChange(val) {
      //当前页
      this.currentPage = val
      this.search()
    },
    //验收
    save() {
      if (this.detail == []) {
        this.$message({
          type: 'warning',
          message: '请选择一条验收'
        })
        return
      }
      for (let i of this.detail) {
        if (i.mnemonicCode == '已验收') {
          this.$message({
            type: 'warning',
            message: '此条数据已验收'
          })
        }
        if (i.mnemonicCode == '未验收') {
          getYH({ inputSequence: this.sequence }).then((res) => {
            console.log(res.data)
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '验收成功'
              })
            } else {
              this.$message.error({
                message: '验收失败'
              })
            }
          })
        }
      }
    },

    rowClick(e) {
      if (e.mnemonicCode == '已验收') {
        this.Dis = true
      } else {
        this.Dis = false
      }
      this.detail = [e]
      console.log(e)
      this.sequence = e.inputSequence
      this.tab2 = []
      if (!this.twoInfo) {
        for (let w of this.inofList) {
          if (e.inputSequence == w.sequence) {
            this.tab2.push(w)
          }
        }
        this.dataLen1 = this.tab2.length
      } else {
        for (let r of this.twoList) {
          if (e.inputSequence == r.inputSequence) {
            this.tab2.push(r)
          }
        }
        this.dataLen1 = this.tab2.length
      }

      // let obj = {
      //   startTime:this.timeDate == null ? '' : (this.timeDate[0] == undefined ? '' : this.timeDate[0] + ' 00:00:00'),
      //   endTime: this.timeDate == null ? '' : (this.timeDate[1] == undefined ? '' : this.timeDate[1] + ' 23:59:59'),
      //   styleNumber:this.styleNumber,
      //   customerNo:this.customerNo,
      //   sequence:this.sequence,
      //   brandName:this.brandName,
      //   quartId:this.quartId,
      //   // selectType:this.az == '进货' ? 0 : (this.az == '退货' ? 1 : (this.az == '销货' ? 2 : 3)),
      //   // selectTypeName:this.az,
      // }
      // console.log(obj)
      // getComplan1(obj).then(res=>{
      //   console.log(res.data)
      //   this.tab2 = res.data.data
      // })
    },
    search() {
      this.tab2 = []
      let obj = {
        startTime:
          this.timeDate == null
            ? null
            : this.timeDate[0] == undefined
            ? ''
            : this.timeDate[0] + ' 00:00:00',
        endTime:
          this.timeDate == null
            ? null
            : this.timeDate[1] == undefined
            ? ''
            : this.timeDate[1] + ' 23:59:59',
        styleNumber: this.styleNumber,
        customerNo: this.customerNo,
        inputSequence: this.sequence,
        brandedName: this.brandName,
        quarter: this.quartId,
        twoInfo: this.twoInfo == false ? 0 : 1
        // selectType:this.az == '进货' ? 0 : (this.az == '退货' ? 1 : (this.az == '销货' ? 2 : 3)),
        // selectTypeName:this.az
      }
      console.log(obj)
      getAcceptance(obj).then((res) => {
        console.log(res.data)
        if (res.data.code == 200) {
          for (let a of res.data.data.inputInquireTotalList) {
            if (a.mnemonicCode == 0) {
              a.mnemonicCode = '未验收'
            } else {
              a.mnemonicCode = '已验收'
            }
          }
          // this.tab1 = res.data.data.inputInquireTotalList
          this.inofList = res.data.data.inputInquireInfoList
          this.dataLen = res.data.total
          this.tab1 = res.data.data.inputInquireTotalList.slice(
            (this.currentPage - 1) * this.limit,
            this.currentPage * this.limit
          )
          if (this.twoInfo) {
            if (res.data.data.customerInputInfoTwos != '') {
              console.log('二维')
              this.dataLen1 = res.data.data.customerInputInfoTwos.length
              this.twoList = res.data.data.customerInputInfoTwos
              this.tab2 = res.data.data.customerInputInfoTwos.slice(
                (this.currentPage1 - 1) * this.limit1,
                this.currentPage1 * this.limit1
              )
            }
          } else {
            this.dataLen1 = res.data.data.inputInquireInfoList.length
            this.tab2 = res.data.data.inputInquireInfoList.slice(
              (this.currentPage1 - 1) * this.limit1,
              this.currentPage1 * this.limit1
            )
          }
        } else {
          this.tab1 = []
          this.tab2 = []
        }
      })
    },
    Change1() {
      for (const i of this.customerList) {
        if (i.value == this.customerName) {
          this.customerNo = i.value1
        }
      }
    },
    Change2() {
      console.log(1)
      for (const i of this.customerList) {
        if (i.value1 == this.customerNo) {
          this.customerName = i.value
        }
      }
    }
    // Change(){
    //   if(this.az == '进货'){
    //     this.bList = this.bList1
    //     this.eList = this.eList1
    //   }else if(this.az == '客存'){
    //     console.log(1)
    //     this.bList = this.bList2
    //     this.eList = this.eList3
    //   }else if(this.az == '退货'){
    //     this.bList = this.bList1
    //     this.eList = this.eList1
    //   }else if(this.az == '销货'){
    //     this.bList = this.bList1
    //     this.eList = this.eList1
    //   }
    // }
  },
  watch: {
    styleNumber(a, b) {
      if (a != undefined) {
        this.styleNumber = a.toUpperCase().trim()
      }
    },
    twoInfo(a, b) {
      if (a) {
        this.eList = this.eList2
        this.search()
      } else {
        this.eList = this.eList1
        this.search()
      }
    },
    dataLen(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
      console.log(this.pagesNum)
    },
    limit(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    dataLen1(a, b) {
      this.pagesNum1 = Math.ceil(this.dataLen1 / this.limit1)
    },
    limit1(a, b) {
      this.pagesNum1 = Math.ceil(this.dataLen1 / this.limit1)
    }
  }
}
</script>
